//重点指标实时监控
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Radio, Select, Button, message, DatePicker, Collapse, Checkbox, Row, Col, Divider, Icon, Drawer, Popconfirm } from 'antd';
import styles from './Kpi_Qnhb.less';
import MyTable from '../../../components/common/MyTable';
import update from 'immutability-helper';
import request from '../../../utils//request';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import Container from '../../../components/common/Container';
import PublicService from "../../../services/PublicService";
import MyPagination from '../../../components/common/MyPagination';
import Echarts_ONE from '../echarts/Echarts_ONE';
import Filtrate from '../../../components/common/Filtrate';
const { MonthPicker, RangePicker } = DatePicker;
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;
class Kpi_Qnhb extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectData: [],//指标数组
            modal1Visible: false,
            tableLoading: false,
            dataSource: [],//表格数组
            params: {},
            pageSize: 10,
            pageIndex: 1,
            total: 0,
            addModal: false,
            columns: [],
            options: [],
            startValue: null,
            endValue: null,
            endOpen: false,
            CheckboxData: [],
            headerFlag: true,
            Radiovalue: 1,//单选值
            statistics: 1,
            monthStr: null,
            Groupvalue: 1,
            zblx: [],
            zblxData: [],
            series:[],
            time:[]
        }



    }
    componentDidMount() {
        this.onSubmit(1, 10)

    }
    onSubmit = (page, size) => {//查询
        const params = this.f1.getForm().getFieldsValue();
        params.page = page;
        params.rows = size;
        params.statistics = this.state.statistics
        if (params.time) {
            params.startTime = moment(params.time[0]).format('YYYY-MM-DD HH:mm:ss');
            params.endTime = moment(params.time[1]).format('YYYY-MM-DD HH:mm:ss');
        } else {
            params.startTime = '';
            params.endTime = '';
        }

        delete params.time;
        if (params.kpiType == '1') {
            this.setState({
                columns: [
                    {
                        children: [
                            {
                                title: '指标单位',
                                dataIndex: 'addTheDate',
                                // key: 'addTheDate',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '指标名称',
                    },
                    {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'rubbish',
                                // key: 'rubbish',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '垃圾进场量',
                    }, {
                        dataIndex: 'xbcw',
                        children: [
                            {
                                title: 't',
                                dataIndex: 'enterFurnace',
                                // key: 'enterFurnace',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '垃圾焚烧量',
                    }, {
                        children: [
                            {
                                title: 'KWh',
                                dataIndex: 'electricity',
                                // key: 'electricity',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '发电量',
                    }, {
                        children: [
                            {
                                title: 'KWh',
                                dataIndex: 'onGridEnergy',
                                // key: 'onGridEnergy',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '上网电量',
                    },
                    {
                        children: [
                            {
                                title: 'KWh',
                                dataIndex: 'nonProduction',
                                // key: 'nonProduction',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '非生产用电量',
                    },
                    {
                        children: [
                            {
                                title: '%',
                                dataIndex: 'nonProductionRatio',
                                // key: 'nonProductionRatio',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '非生产用电率',
                    },
                    {
                        children: [
                            {
                                title: 'KWh',
                                dataIndex: 'powerStation',
                                // key: 'powerStation',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '发电厂用电量',
                    },
                    {
                        children: [
                            {
                                title: '%',
                                dataIndex: 'powerStationRatio',
                                // key: 'powerStationRatio',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '发电厂用电率',
                    },
                    {
                        children: [
                            {
                                title: 'KWh',
                                dataIndex: 'synthesize',
                                // key: 'synthesize',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '综合厂用电量',
                    },
                    {
                        children: [
                            {
                                title: '%',
                                dataIndex: 'synthesizeRatio',
                                // key: 'synthesizeRatio',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '综合厂用电率',
                    },
                    {
                        children: [
                            {
                                title: 'KWh',
                                dataIndex: 'byThePower',
                                // key: 'byThePower',
                                width: 100,
                                align: 'center',
                            },

                        ],
                        title: '受电量',
                    },
                ],
            })
        } else if (params.kpiType == '2') {
            this.setState({
                columns: [
                    {
                        children: [
                            {
                                title: '指标单位',
                                dataIndex: 'addTheDate',
                                // key: 'addTheDate',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '指标名称',
                    },
                    {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'rubbish',
                                // key: 'rubbish',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '垃圾进厂量',
                    },
                    {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'enterFurnace',
                                // key: 'enterFurnace',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '垃圾焚烧量',
                    },
                    {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'fuelOil',
                                // key: 'fuelOil',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '燃油使用量',
                    }, {
                        dataIndex: 'xbcw',
                        children: [
                            {
                                title: 't',
                                dataIndex: 'water',
                                // key: 'water',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '水资源使用量',
                    }, {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'caoh2',
                                // key: 'caoh2',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '氢氧化钙使用量',
                    }, {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'charcoal',
                                // key: 'charcoal',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '活性炭使用量',
                    },
                    {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'chelate',
                                // key: 'chelate',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '蛰合剂使用量',
                    },
                    {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'slag',
                                // key: 'slag',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '炉渣产量',
                    },
                    {
                        children: [
                            {
                                title: 't',
                                dataIndex: 'flyAsh',
                                // key: 'flyAsh',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '飞灰产量',
                    },
                ],
            })
        } else {
            this.setState({
                columns: [
                    {
                        children: [
                            {
                                title: '指标单位',
                                dataIndex: 'addTheDate',
                                // key: 'addTheDate',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '指标名称',
                    },
                    {
                        children: [
                            {
                                title: 'KWh/t',
                                dataIndex: 'electricity',
                                // key: 'electricity',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾发电量',
                    }, {
                        dataIndex: 'xbcw',
                        children: [
                            {
                                title: 't/t',
                                dataIndex: 'fuelOil',
                                // key: 'fuelOil',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾耗油量',
                    },
                    {
                        children: [
                            {
                                title: 'KWh/t',
                                dataIndex: 'synthesize',
                                // key: 'synthesize',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾耗电量',
                    },
                    {
                        children: [
                            {
                                title: 'KWh/t',
                                dataIndex: 'water',
                                // key: 'water',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾耗水量',
                    },
                    {
                        children: [
                            {
                                title: 't/t',
                                dataIndex: 'charcoal',
                                // key: 'charcoal',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾活性炭耗量',
                    },
                    {
                        children: [
                            {
                                title: 'KWh/t',
                                dataIndex: 'caoh2',
                                // key: 'caoh2',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾氢氧化钙耗量',
                    },
                    {
                        children: [
                            {
                                title: 'KWh/t',
                                dataIndex: 'chelate',
                                // key: 'chelate',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾蛰合剂耗量',
                    },
                    {
                        children: [
                            {
                                title: 't/t',
                                dataIndex: 'slag',
                                // key: 'slag',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾炉渣量',
                    },
                    {
                        children: [
                            {
                                title: 't/t',
                                dataIndex: 'flyAsh',
                                // key: 'flyAsh',
                                width: 130,
                                align: 'center',
                            },

                        ],
                        title: '吨垃圾飞灰量',
                    },

                ],
            })
        }


        this.setState({
            params
        })


        request({
            url: '/sx-client/sx/indicator/KpiPagingQuery',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.count,
                    params
                })
            } else {
                message.warning(`${data.err}`)
            }
        })

    }



    //自动日期开始
    //日期选择器的所有事件,包含了自定义时间选取范围(开始)
    disabledStartDate = (startValue) => {
        const endValue = this.state.endValue;

        if (!startValue || !endValue) {
            return false;
        }

        return startValue.valueOf() > endValue.valueOf();
    }

    disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
            return false;
        }

        let one = startValue.valueOf() + 1000 * 60 * 60 * 48;

        let noDate = Number(new Date())


        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() >= one || endValue.valueOf() >= noDate;
    }

    onStartChange = (value) => {
        // console.log(value.valueOf())
        if (value.valueOf() > moment().valueOf()) {
            message.warning('已超出当前时间!');
            return
        }
        this.onChange('startValue', value);

    }

    handleStartOpenChange = (open) => {
        if (!open) {
            this.setState({ endOpen: true });
        }
    }

    onEndChange = (value) => {
        this.onChange('endValue', value);
    }

    handleEndOpenChange = (open) => {
        this.setState({ endOpen: open });
    }

    onChange = (field, value) => {
        this.setState({
            [field]: value,
        });
    }
    //自动日期结束

    onChangeCheckbox = (checkedValues) => {
        console.log('checked = ', checkedValues);
        this.setState({
            CheckboxData: checkedValues
        })
    }

    CollapseonChange = () => {
        console.log(123)
        this.setState({
            headerFlag: !this.state.headerFlag
        })
    }

    onChangeRadio = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            Groupvalue: e.target.value,
        });


    };
    // 分页
    onChangePage = (page, size) => {//分页
        this.setTimeAndSearch(this.state.params, page, size);
        this.setState({
            pageSize: size,
            pageIndex: page,
        })
    };

    onChangePage1 = (page, size) => {//改变最大条数
        this.setTimeAndSearch(this.state.params, 1, size);
        this.setState({
            pageSize: size,
            pageIndex: 1
        })
    };

    setTimeAndSearch = (val, pageIndex, row) => {

        console.log(val, pageIndex, row)
        val.page = pageIndex;
        val.rows = row;

        request({
            url: '/sx-client/sx/indicator/KpiPagingQuery',
            method: 'POST',
            data: val
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.count,
                })
            }
        })

    };

    addItem = () => {
        this.setState({
            visible: true,
        });
    }



    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectData: value
        })
    }

    zblxhandleChange = (value) => {
        this.setState({
            zblx: value
        }, () => {
            this.getIndexSelection(value)
        })


    }
    getIndexSelection = (kpiType) => {
        request({
            url: `/sx-client/sx/indicator/getIndexSelection?kpiType=${kpiType}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    zblxData: data.ret
                })
            }

        })

    }

    onChangeCheckbox = (checkedValues) => {
        console.log('checked = ', checkedValues);
        this.setState({
            selectData: checkedValues
        })
    }

    onChangestatistics = (e) => {
        this.setState({
            statistics: e.target.value,
        }, () => {
            this.onSubmit(1, 10)
        });
    }

    confirm = () => {
        let isAll = true
        window.location.href = '/sx-client/sx/indicator/exportKpiIndicator?' + PublicService.paramSerializer({
            ...this.state.params,
            isAll
        })
    }

    cancel = () => {
        let isAll = false
        window.location.href = '/sx-client/sx/indicator/exportKpiIndicator?' + PublicService.paramSerializer({
            ...this.state.params,
            isAll
        })
    }

    onMonthPicker = (data) => {
        this.setState({
            monthStr: data
        })
    }

    getTrendViewData = () => {
        if(this.state.Groupvalue == 1) {
            if(!this.state.monthStr){
                message.warning('请完善查询参数!')
                return
            }

            if(this.state.zblxData.length < 1){
                message.warning('请完善查询参数!')
                return
            }

            let params = {
                endTime:'',
                startTime:'',
                indexList:this.state.selectData,
                kpiType:this.state.zblx,
                monthStr:this.state.monthStr.valueOf()
            }

            request({
                url: '/sx-client/sx/indicator/getTrendViewData',
                method: 'POST',
                data: params
            }).then(data => {
                console.log(data)
                if (data.rc === 0) {
                    let arr = []
                    data.ret.list.forEach((item) => {
                        arr.push({
                            name: item.name,
                            type: 'line',
                            yAxisIndex: 0,
                            smooth: true,
                            showSymbol: false,//控制节点显示
                            data: item.data
                        }, )
                    })
    
                    this.setState({
                        series: arr,
                        time: data.ret.time
                    })
                }
            })


        }

        if(this.state.Groupvalue == 2) {
            if(!this.state.endValue){
                message.warning('请完善查询参数!')
                return
            }

            if(this.state.zblxData.length < 1){
                message.warning('请完善查询参数!')
                return
            }

            let params = {
                endTime:moment(this.state.endValue).format('YYYY-MM-DD HH:mm:ss'),
                startTime:moment(this.state.startValue).format('YYYY-MM-DD HH:mm:ss'),
                indexList:this.state.selectData,
                kpiType:this.state.zblx,
                monthStr:''
            }

            request({
                url: '/sx-client/sx/indicator/getTrendViewData',
                method: 'POST',
                data: params
            }).then(data => {
                console.log(data)
                if (data.rc === 0) {
                    let arr = []
                    data.ret.list.forEach((item) => {
                        arr.push({
                            name: item.name,
                            type: 'line',
                            yAxisIndex: 0,
                            smooth: true,
                            showSymbol: false,//控制节点显示
                            data: item.list
                        }, )
                    })
    
                    this.setState({
                        series: arr,
                        time: data.ret.time
                    })
                }
            })

        }
    }
    render() {
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        let tableHeight = 230;
        // console.log(width)
        if (width < 1900) {
            tableHeight = 270;
            containerHeight = '63vh';
        }

        const items = [
            {
                type: 'select',
                label: '指标类型',
                paramName: 'kpiType',
                options: [
                    { text: '经济指标', value: '1' },
                    { text: '物耗能耗指标', value: '2' },
                    { text: '单产单耗指标', value: '3' },
                ],
            },
            {
                type: 'rangePicker',
                label: '时间选取',
                paramName: 'time',
                initialValue: null,
            },
        ];



        const { zblxData, options, footerShow, modalBtnLoading, modalTitle, dataSource, tableLoading, pageSize, pageIndex, total, startValue, endValue, endOpen, columns } = this.state
        return (

            <div className={styles.warp}>
                <Drawer
                    title="选取指标"
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    width={800}
                    visible={this.state.visible}
                >
                    <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeCheckbox} value={this.state.selectData}>
                        <Row>
                            {
                                zblxData.map((item) => {
                                    return (
                                        <Col span={8}>
                                            <Checkbox value={item.value}>{item.label}</Checkbox>
                                        </Col>
                                    )
                                })
                            }

                        </Row>
                    </Checkbox.Group>
                </Drawer>
                <Tabs defaultActiveKey="1" className={styles.Tabs}>
                    <TabPane tab="总览视图" key="1">

                        <Filtrate
                            items={items}
                            ref={ref => { this.f1 = ref }}
                            submit={this.onSubmit.bind(this, 1, 10)}
                            ResetForm={this.ResetForm}
                        />

                        <Container
                            style={{ height: containerHeight, position: "relative", overflow: 'auto' }}
                        // header={true}
                        >
                            <div style={{ width: 400, height: 40, position: 'absolute', left: 50, top: 0, display: 'flex', alignItems: 'center' }}>
                                <Radio.Group onChange={this.onChangestatistics} value={this.state.statistics}>
                                    <Radio value={1}>日</Radio>
                                    <Radio value={2}>月</Radio>
                                    <Radio value={3}>年</Radio>
                                </Radio.Group>
                            </div>
                            <div style={{ width: 400, height: 40, position: 'absolute', right: 10, top: 0, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                                <div>统计周期 : 2019年12月1日 - 2019年11月1日</div>
                                <Popconfirm
                                    title="导出全部?"
                                    onConfirm={this.confirm}
                                    onCancel={this.cancel}
                                    okText="确定"
                                    cancelText="取消"
                                >
                                    <Button size='small' style={{ marginLeft: 10 }} type="primary" >导出</Button>
                                </Popconfirm>
                            </div>

                            <MyTable
                                columns={columns}
                                scroll={{ y: height - tableHeight }}
                                dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                                pagination={false}
                            />
                            <MyPagination
                                showPage
                                pageSize={pageSize}
                                current={pageIndex}
                                total={total}
                                showSizeChanger
                                showQuickJumper
                                onChange={this.onChangePage.bind(this)}
                                onShowSizeChange={this.onChangePage1.bind(this)}
                            />
                        </Container>

                    </TabPane>
                    <TabPane tab="趋势视图" key="2">
                        <div className={styles.topBox}>
                            <Radio.Group onChange={this.onChangeRadio} value={this.state.Groupvalue}>
                                <Radio value={1}>月度</Radio>
                                <Radio value={2}>自定义</Radio>


                            </Radio.Group>
                            {
                                this.state.Groupvalue == 1 && <div style={{ width: 300 }}>
                                    <span style={{ marginLeft: 10 }}>时间选取：</span>
                                    <MonthPicker format={'YYYY/MM'} size="small" value={this.state.monthStr} onChange={this.onMonthPicker} />
                                </div>
                            }

                            {
                                this.state.Groupvalue == 2 &&
                                <div style={{ width: 600 }}>
                                    <span style={{ marginLeft: 10 }}>时间选取：</span>
                                    <DatePicker
                                        allowClear={false}
                                        locale={locale}
                                        disabledDate={this.disabledStartDate}
                                        showTime
                                        format="YYYY-MM-DD HH:mm:ss"
                                        size="small"
                                        value={startValue}
                                        placeholder="开始时间"
                                        onChange={this.onStartChange}
                                        onOpenChange={this.handleStartOpenChange}
                                        style={{ width: 220, marginRight: 10, marginLeft: 5 }}
                                    />

                                    ~<DatePicker
                                        allowClear={false}
                                        locale={locale}
                                        disabledDate={this.disabledEndDate}
                                        showTime
                                        size="small"
                                        format="YYYY-MM-DD HH:mm:ss"
                                        value={endValue}
                                        placeholder="结束时间"
                                        onChange={this.onEndChange}
                                        open={endOpen}
                                        onOpenChange={this.handleEndOpenChange}
                                        style={{ width: 220, marginRight: 10, marginLeft: 5 }}
                                    />
                                </div>
                            }


                            <div style={{ width: 300 }}>
                                <span style={{ marginLeft: 10 }}>指标类型：</span>
                                <Select
                                    style={{ width: 220 }}
                                    placeholder="请选取"
                                    onChange={this.zblxhandleChange}
                                    size='small'
                                    value={this.state.zblx}
                                >
                                    <Option value="1">经济指标</Option>
                                    <Option value="2">物耗能耗指标 </Option>
                                    <Option value="3">单产单耗指标</Option>

                                </Select>
                            </div>




                            <div style={{ width: 400 }}>
                                <span style={{ marginLeft: 10 }}>指标选取：</span>
                                <Select
                                    style={{ width: 270 }}
                                    maxTagCount={2}
                                    placeholder="请选取"
                                    mode="multiple"
                                    maxTagTextLength={5}
                                    onChange={this.handleChange}
                                    size='small'
                                    value={this.state.selectData}
                                    dropdownRender={menu => (
                                        <div>
                                            {menu}
                                            <Divider style={{ margin: '4px 0' }} />
                                            <div
                                                style={{ padding: '4px 8px', cursor: 'pointer' }}
                                                onMouseDown={e => e.preventDefault()}
                                                onClick={this.addItem}
                                            >
                                                <Icon type="plus" /> 更多
                                    </div>
                                        </div>
                                    )}
                                >
                                {
                                    zblxData.map((item) => {
                                        return(
                                            <Option value={item.value}>{item.label}</Option>
                                        )
                                    })
                                }
                                   

                                </Select>
                            </div>
                            <Button size='small' style={{ marginLeft: 10 }} type="primary" onClick={this.getTrendViewData}>查询</Button>
                            <Button size='small' style={{ marginLeft: 10 }} >重置</Button>
                        </div>

                        <div style={{ height: containerHeight, overflow: 'auto', position: 'relative' }} className={styles.bottomBox}>
                            <div className={styles.title}>
                                <div style={{ display: 'flex', alignItem: 'center' }}><span className={styles.ciler}></span> 历史趋势图</div>
                            </div>
                            <Echarts_ONE series={this.state.series} time={this.state.time}/>

                        </div>

                    </TabPane>

                </Tabs>
            </div>
        )
    }


}

export default connect()(Kpi_Qnhb)